import {useSelector,useDispatch} from 'react-redux'
import {getPermission} from '../store/permissionSlice'
import React, { useState ,useEffect} from 'react';
// 导入图标很多个
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
// 导入 布局，菜单，按钮
import { Layout, Menu, Button} from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
// 把布局结构为header标题，side侧边，content内容
// Laoyou就是一个自适应div
const { Header, Sider, Content } = Layout;
const AdminView = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate()
  const clickHd = ({key})=>{
     navigate(key)
  }
  const {menus} = useSelector(state=>state.permission);
  const dispatch = useDispatch();
  // 组件加载完毕
  useEffect(()=>{
    // 如果么有菜单
    if(!menus||menus.length==0){
      // 获取菜单
      dispatch(getPermission())
    }
  },[])
  // 递归映射数据
  function mapMenus(list){
    // 返回的数组
    var menus = [];
    // 变量传入参数list
    for(var i=0;i<list.length;i++){
      // 定义对象
      var obj = {};
      // 定义lable
      obj.label =list[i].name;
      // key
      obj.key = list[i].path;
      // 如果当前遍历的元素有children
      if(list[i].children){
        // 递归映射（让obj也有child）
        obj.children = mapMenus(list[i].children);
      }
      //添加obj
      menus.push(obj);
    }
    return menus;
  }
  return (
    <Layout className='admin'>
       <Header
          style={{
            padding: 0,
          }}
        >
          <img src='https://www.1yd.me/images/new/logo.png'/>
          
       </Header>
       <Layout>
        <Sider trigger={null} collapsible collapsed={collapsed}>
        <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
              color:"#fff"
            }}
          />
          <div className="menu" />
          <Menu
            theme="dark"
            mode="inline"
            onClick={clickHd}
            defaultSelectedKeys={['1']}
            items={ mapMenus(menus)}
          />
        </Sider>
        <Content
            style={{             
              padding: 16,
              minHeight: 280,
            }}
          >
           <Outlet/>
          </Content>
      </Layout>
    </Layout>
  );
};
export default AdminView;